import React, { useState, useEffect, createRef } from "react";
import ReactEcharts from "echarts-for-react";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import "./index.scss";
import { AtFloatLayout } from "taro-ui";
import { CommonList } from "../common-list";
import { ITaskTrendChart } from "src/interfaces";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { isIos } from "../../utils";
interface DataType {
  xData: string[];
  target: number[];
  actual: number[];
}

type TrendChartType = {
  originData: ITaskTrendChart[];
  type: string;
};

export const TrendChart = ({ originData, type }: TrendChartType) => {
  let xData: string[] = [],
    target: number[] = [],
    actual: number[] = [];
  const [isOpened, setIsOpened] = useState(false);
  const [curIndex, setCurIndex] = useState(6);
  // 以昨天为起点
  const timerList = [
    {
      title: "一周",
      value: dayjs().subtract(1, "day").subtract(7, "day").valueOf(),
    },
    {
      title: "1个月",
      value: dayjs().subtract(1, "day").subtract(1, "month").valueOf(),
    },
    {
      title: "3个月",
      value: dayjs().subtract(1, "day").subtract(3, "month").valueOf(),
    },
    {
      title: "6个月",
      value: dayjs().subtract(1, "day").subtract(6, "month").valueOf(),
    },
    {
      title: "一年",
      value: dayjs().subtract(1, "day").subtract(1, "year").valueOf(),
    },
    {
      title: "2年",
      value: dayjs().subtract(1, "day").subtract(2, "year").valueOf(),
    },
    { title: "全部时间", value: 0 },
  ];
  const getOption = (xData, target, actual) => {
    return {
      grid: {
        x: 22,
        x2: 8,
        y: 10,
        y2: 22,
        height: 200,
      },
      tooltip: {
        backgroundColor: "rgba(0,0,0,0.8)", // 提示框浮层的背景颜色。
        borderWidth: 0, // 提示框浮层的边框宽。
        padding: 12, // 提示框浮层内边距，
        renderMode: "html",
        textStyle: {
          // 提示框浮层的文本样式。
          color: "#fff",
          fontWeight: "normal",
          fontSize: 12,
        },
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            color: "DBDEE6",
          },
          axisLine: {
            lineStyle: {
              color: "#DBDEE6",
            },
          },
          data: xData,
        },
      ],
      yAxis: {
        type: "value",
      },
      dataZoom: [
        {
          show: true, //为true滚动条出现
          type: "slider", //type:'inside'，滚动条在最下面，鼠标点击滚动
          startValue: 0, // 从头开始。
          endValue: 6, //end百分比显示范围，endValue具体显示几个数值
          height: 8,
          top: 230,
          handleSize: 25,
        },
      ],
      series: [
        {
          name: "全部任务",
          type: "line",
          stack: "总量",
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: "#3972F9",
              lineStyle: {
                color: "#3972F9",
                width: 2,
              },
            },
          },
          data: target,
        },
        {
          name: "完成任务",
          type: "line",
          stack: "总量1",
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: "#6BDCAF",
              lineStyle: {
                color: "#6BDCAF",
                width: 2,
              },
            },
          },
          data: actual,
        },
      ],
    };
  };

  const eChartsRef = React.useRef(null as any);
  useEffect(() => {
    xData = [];
    target = [];
    actual = [];
    originData.forEach((item) => {
      if (item?.date > timerList?.[curIndex].value) {
        xData.push(dayjs(item?.date).format("YYYY-MM-DD"));
        target.push(item?.total);
        actual.push(item?.done);
      }
    });
    if (eChartsRef && eChartsRef.current)
      eChartsRef.current
        ?.getEchartsInstance()
        .setOption(getOption(xData, target, actual));
  }, [curIndex]);
  return (
    <div className="trend-chart">
      <TitleBar name="任务完成走势图">
        <div className="time-selector">
          <span
            className="time-value"
            onClick={() => {
              setIsOpened(true);
            }}
          >
            {timerList[curIndex]?.title}
          </span>
          <span className="iconfont icon-down-line"></span>
        </div>
      </TitleBar>
      <Card>
        <ReactEcharts
          className="trend-chart-echart"
          option={getOption(xData, target, actual)}
          notMerge
          lazyUpdate
          ref={eChartsRef}
        />
      </Card>
      <AtFloatLayout
        className="time-select-layout"
        isOpened={isOpened}
        title="时间选择"
        onClose={(val) => {
          setIsOpened(val as any);
        }}
      >
        <CommonList
          setIsOpened={setIsOpened}
          curIndex={curIndex}
          setCurIndex={setCurIndex}
          list={timerList}
        />
      </AtFloatLayout>
    </div>
  );
};
